<!--账户管理->后台人员管理->新增/编辑 -->
<template>
  <div class="changePeopleInfo">
    <el-breadcrumb separator="/" class="bread-title">
      <el-breadcrumb-item :to="{ path: '/systemParams' }">后台人员管理</el-breadcrumb-item>
      <el-breadcrumb-item>{{pageType}}</el-breadcrumb-item>
    </el-breadcrumb>
     <el-form :model="form" :rules="rules" label-width="70px" label-position="left" ref="accounForm">
      <el-form-item prop="province" label="省份：">
        <el-select
          v-model.trim="form.province"
          placeholder="省"
          @change="loadCity"
          class="form-width"
        >
          <el-option
            v-for="(item,index) in provinceOptions"
            :key="index"
            :label="item.province"
            :value="item.provinceid"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item prop="city" label="城市：">
        <el-select
          v-model.trim="form.city"
          placeholder="市"
          class="form-width"
          :disabled="!cityOptions.length"
        >
          <el-option
            v-for="(item,index) in cityOptions"
            :key="index"
            :label="item.city"
            :value="item.cityId"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="线路：" prop="rwName">
        <el-input v-model="form.rwName" placeholder="线路" class="form-width"></el-input>
      </el-form-item>
    </el-form>
    <p style="text-align:center;max-width:600px">
      <el-button type="primary" @click="addSave()">保存</el-button>
      <el-button type="primary" @click="back()">返回</el-button>
    </p>
  </div>
</template>

<script>
import api from "@/api/apiPath";
export default {
  name: "changePeopleInfo",
  computed: {},
  data() {
    return {
      form: {
        typeName: "",
        dicDesc: "",
        dicKey: "",
        dicValue: "",
        dicOrder: ""
      },
      formList: [
        { label: "字典种类", prop: "typeName" },
        { label: "字典描述", prop: "dicDesc" },
        { label: "key值", prop: "dicKey" },
        { label: "value值", prop: "dicValue" },
        { label: "字典排序", prop: "dicOrder" }
      ],
      typeStatus: "",
      pageType: "",
      typeFunction: {
        //页面状态
        add: () => {
          this.pageType = "新增";
        },
        edit: row => {
          this.pageType = "编辑";
          this.form = row; //加载表单信息
        }
      }
    };
  },
  methods: {
    addSave() {
      this.$refs.form.validate(valid => {
        if (!valid) {
          return;
        }
        let params = {
          ...this.form,
        };
        let urls = {add:'/sysdic/dicAdd',edit:'/sysdic/dicUpdate'}
        this.$axios
          .post(urls[this.typeStatus], params)
          .then(res => {
              let text = {add:"添加成功",edit: "编辑成功"};
              this.$alert(text[this.typeStatus], "提示", {
                type: "success",
                confirmButtonText: "确定",
                callback: action => {
                  this.$router.go(-1);
                }
              });
            
          })
          .catch(error => {
            console.log(error);
          });
      });
    },
    back() {
      this.$router.go(-1);
    },
  },
  created() {
    let { pageType, row } = this.$route.query;
    //更改页面状态（新增/编辑）
    this.typeStatus = pageType;
    //执行该状态init()
    this.typeFunction[pageType](row);
  },
  destroyed() {},
  
};
</script>

<style lang="stylus" >
.changePeopleInfo {
}
</style>
